<template>
  <div>
    <el-row class="bottom-space">
      <el-col :span="8">
        <el-button size="small" type="primary" @click="newTask" v-if="showTheTasksICreated">新建任务</el-button>
        <!-- 这个div用于在el-button不显示的时候占位置 -->
        <div v-else style="height: 10px"></div>
      </el-col>
      <el-col :span="8">
        <el-radio-group @change="valueChange" size="small" v-model="taskParam.status">
          <el-radio-button :label="-1">全部</el-radio-button>
          <el-radio-button :label="0">未启动</el-radio-button>
          <el-radio-button :label="1">进行中</el-radio-button>
          <!-- status = 2的暂停状态暂时不做 -->
          <el-radio-button :label="3">已完成</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="8">
        <div>
          <div style="width: 400px; float: right">
            <el-input v-model="taskParam.name" placeholder="请输入关键词" size="small" @keyup.enter.native="updatePage">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <i slot="suffix" v-if="showAdvance" class="el-input__icon el-icon-arrow-up" @click="switchAppend"></i>
              <i slot="suffix" v-else class="el-input__icon el-icon-arrow-down" @click="switchAppend"></i>
            </el-input>
          </div>
          <div v-if="showAdvance" class="advanced">
            <el-row class="bottom-space">
              <el-col :span="24">
                <el-select v-model="taskParam.knowledgeLibId" clearable filterable placeholder="请选择所属知识库" size="small"
                           style="width: 100%">
                  <el-option v-for="item in $store.state.knowledgeLibList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="bottom-space">
              <el-col :span="24">
                <el-date-picker v-model="taskParam.dateRange" :picker-options="pickerOptions" align="right" end-placeholder="截止日期"
                                range-separator="至" value-format="yyyy-MM-dd"
                                size="small" start-placeholder="开始日期" style="width: 100%"
                                type="daterange" unlink-panels>
                </el-date-picker>
              </el-col>
            </el-row>
            <el-row v-if="!showTheTasksICreated" class="bottom-space">
              <el-col :span="24">
                <el-select filterable clearable v-model="taskParam.createdBy" style="width: 100%"
                           placeholder="请选择创建人"
                           size="small">
                  <el-option
                          v-for="item in this.$store.state.userList"
                          :key="item.userName"
                          :label="item.name"
                          :value="item.userName">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="bottom-space">
              <el-col :span="5" class="slider-label-col">
                <span class="slider-label">编辑进度</span>
              </el-col>
              <el-col :span="18">
                <el-slider v-model="taskParam.editPercentRange" :max="100" :step="10" range show-stops></el-slider>
              </el-col>
            </el-row>
            <el-row class="bottom-space">
              <el-col :span="5" class="slider-label-col">
                <span class="slider-label">审核进度</span>
              </el-col>
              <el-col :span="18">
                <el-slider v-model="taskParam.auditPercentRange" :max="100" :step="10" range show-stops></el-slider>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="float: right">
                  <el-button plain size="small" @click="resetAdvancedSearch">重置</el-button>
                  <el-button size="small" type="primary" @click="advancedSearch">搜索</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-table highlight-current-row :data="taskData" :height="tableHeight" border>
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column label="任务名称" min-width="80" prop="name"></el-table-column>
        <el-table-column label="所属知识体系" v-if="system === 'all'" min-width="80" prop="systemType">
          <template slot-scope="scope">
            <span v-if="CONST.SYSTEM_TYPE.find(item => item.value === scope.row.systemType)">
              {{ CONST.SYSTEM_TYPE.find(item => item.value === scope.row.systemType).label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属知识库" v-if="system === 'all' || system === 'knowledge'" min-width="80" prop="knowledgeLibId">
          <template slot-scope="scope">
            <span>{{ UTIL.getNameById($store.state.knowledgeLibList, scope.row.knowledgeLibId) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="!showTheTasksICreated" label="创建人" min-width="80" prop="createdBy">
          <template slot-scope="scope">
              <span v-text="UTIL.getNameByUserName(scope.row.createdBy)"></span>
          </template>
        </el-table-column>
        <el-table-column v-if="showTheTasksICreated" label="名称待确认" width="100">
          <template slot-scope="scope">
            <el-link v-if="scope.row.nameSuggestionCount > 0" style="color: red"
                     @click="edit(scope.row.id, true)">
                      {{ scope.row.nameSuggestionCount }}</el-link>
            <span v-else>{{ scope.row.nameSuggestionCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" prop="startDate" width="110"></el-table-column>
        <el-table-column label="截止时间" prop="endDate" width="110"></el-table-column>
        <el-table-column label="任务状态" prop="status" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0" class="task-not-start">未启动</span>
            <span v-else-if="scope.row.status === 1" class="task-in-progress">进行中</span>
            <span v-else-if="scope.row.status === 3" class="task-finished">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="编辑进度" prop="editPercent" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.editPercent}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="审核进度" prop="auditPercent" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.auditPercent}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="operation" width="210">
          <template slot-scope="scope">
            <el-link v-if="scope.row.status === 0 && showTheTasksICreated" @click="start(scope.row.id)">启动</el-link>
            <el-link v-if="scope.row.status === 1 && showTheTasksICreated" @click="finish(scope.row)">完成</el-link>
            <el-link @click="detail(scope.row.id)">详情</el-link>
            <el-link v-if="scope.row.status !== 3 && showTheTasksICreated" @click="edit(scope.row.id)">编辑</el-link>
            <el-link v-if="scope.row.status === 0 && showTheTasksICreated" @click="del(scope.row.id)">删除</el-link>
            <el-link v-if="scope.row.status === 1 && showTheTasksICreated" type="danger" @click="press(scope.row.id)">
              催办
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        :current-page.sync="taskParam.currentPage"
        :page-size.sync="taskParam.pageSize"
        :page-sizes="[5, 10, 15, 20, 50, 100]"
        :total="total"
        background
        style="float: right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TaskList",
  props: {
    system: String
  },
  data() {
    return {
      taskParam: {
        name: '',
        status: -1,
        createdBy: '',
        currentPage: 1,
        pageSize: 10,
        editPercentRange: [0, 100],
        auditPercentRange: [0, 100],
        systemType: this.system,
        knowledgeLibId: '',
        dateRange: [],
      },
      showAdvance: false,
      taskData: [],
      total: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableHeight: 0,
      showTheTasksICreated: false
    }
  },
  methods: {
    newTask() {
      this.$router.push("/task/new")
    },
    valueChange: function () {
      this.resetAdvancedSearch()
        this.updatePage()
    },
    updatePage() {
      this.axios.post("/pmph/action/task/selectTaskPage", this.taskParam)
        .then((res) => {
          this.taskData = res.data.records
          this.total = res.data.total
        })
    },
    switchAppend() {
      this.showAdvance = !this.showAdvance
    },
    handleSizeChange() {
      this.updatePage()
    },
    handleCurrentChange() {
      this.updatePage()
    },
    start(id) {
      this.axios.get("/pmph/action/task/start", {
        params: {
          id: id
        }
      }).then(() => {
        this.updatePage()
      })
    },
    finish(row) {
      let currentRow = {
        id: "",
        editPercent: 0,
        auditPercent: 0
      }
      currentRow = row
      if (currentRow.editPercent < 100 || currentRow.auditPercent < 100) {
        this.$message.warning("存在未完成的子任务，无法关闭当前任务")
        return
      }
      this.axios.get("/pmph/action/task/finish", {
        params: {
          id: currentRow.id
        }
      }).then(() => {
        this.updatePage()
      })
    },
    del(id) {
      this.$confirm('该任务下的所有子任务会一并进行删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/pmph/action/task/delete", {
          params: {
            id: id
          }
        }).then(() => {
          this.updatePage()
        })
      })
    },
    press(id) {
      this.$confirm('确定催办该任务？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/pmph/action/task/press", {
          params: {
            id: id,
            type: "all"
          }
        }).then(() => {
          this.updatePage()
        })
      })
    },
    edit(id, nameSuggestionFilterFlag) {
      this.$router.push({
        path: "/task/edit",
        query: {taskId: id, nameSuggestionFilterFlag}
      })
    },
    resetAdvancedSearch() {
      this.taskParam.createdBy = this.showTheTasksICreated ? this.$store.state.user.userName : ''
      this.taskParam.knowledgeLibId = ''
      this.taskParam.dateRange = []
      this.taskParam.editPercentRange = [0, 100]
      this.taskParam.auditPercentRange = [0, 100]
    },
    detail(id) {
      this.$router.push({
        path: "/task/detail",
        query: {id: id}
      })
    },
    advancedSearch() {
      this.taskParam.currentPage = 1
      this.updatePage()
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 150
    this.showTheTasksICreated = this.$route.path.endsWith('self')
    if (this.showTheTasksICreated) {
      this.taskParam.createdBy = this.$store.state.user.userName
    }
  },
  activated() {
    if (this.$route.meta.isUseCache) {
      return
    }
    this.updatePage()
  }
}
</script>

<style scoped>
.advanced {
  width: 378px;
  position: absolute;
  top: 35px;
  right: 1px;
  z-index: 100;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0 0 0 0.1);
  padding: 10px;
}

.task-not-start {
  color: #FF8C00;
}

.task-in-progress {
  color: #00AB44;
}

.task-finished {
  color: #999999;
}

.bottom-space {
  margin-bottom: 10px;
}

.slider-label {
  font-size: 14px;
  vertical-align: top;
  color: #c1c4cb;
}

.slider-label-col {
  height: 38px;
  line-height: 38px;
}
</style>
